<template>
	<view class="container">
		<view class="refund-form">
			<view class="form-item">
				<text>申请类型：</text>
				<picker @change="onChangeType" :value="indexType" :range="type">
					<view>{{ type[indexType] || '点击选择申请类型' }}
						<uni-icons type="forward" size="18" class="right-arrow-icon"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text>收货状态：</text>
				<picker @change="onChangeStatus" :value="indexStatus" :range="status">
					<view>{{ status[indexStatus] || '点击选择收获状况' }}
						<uni-icons type="forward" size="18" class="right-arrow-icon"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text>申请原因：</text>
				<picker @change="onChangeReason" :value="indexReason" :range="reasons">
					<view>{{ reasons[indexReason] || '点击选择申请原因' }}
						<uni-icons type="forward" size="18" class="right-arrow-icon"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text>申请金额：</text>
				<input type="number" v-model="price" />
			</view>
			<view class="form-item">
				<text>申请说明：</text>
				<textarea v-model="description" placeholder="您还可以输入170字" />
			</view>
			<view class="form-item">
				<text>上传图片：</text>
				<view class="upload-container">
					<view v-if="imageUrl" class="image-preview">
						<image :src="imageUrl" class="preview-image" />
					</view>
					<button @click="selectImage" class="upload-button">选择图片</button>
				</view>
			</view>
			<view class="form-item">
				<text>联系电话：</text>
				<input type="number" v-model="phone" placeholder="请输入手机号" />
			</view>
			<button @click="submitForm" class="submit-button">提交申请</button>
		</view>
	</view>
</template>

<script>
	import axios from 'axios';
	import service from '../../utils/request.js';
	export default {
		data() {
			return {
				userID: localStorage.getItem("userID"),
				imageUrl: null, // 图片 URL
				indexStatus: 0,
				indexType: 0,
				indexReason: 0,
				reasons: ['不想要了', '货不对款', '买错了'],
				type: ['我要退款(无需退货)', '我要退款退货'],
				status: ['已收到货', '未收到货'],
				price: 60.98, // 商品价格
				description: '',
				phone: '',
				goodsId: 0,
				sellerId: 0,
				price: 0,
				orderNum: '',
				status1:'',
			};
		},
		onLoad(options) {
			// 获取 URL 查询参数
			this.goodsId = options.goodsID;
			this.sellerId = options.sellerID;
			this.price = options.price;
			this.orderNum = options.orderNum;
			this.status1=options.status1
		},
		methods: {
			async submitForm() {
				try {
					this.userID = localStorage.getItem("userID");
					const response = await service.post('/refund/doRefund', { // 你的后端地址
						sellerId: this.sellerId,
						userId: this.userID,
						price:this.price,
						orderNo:this.orderNum,
						goodsId:this.goodsId,
						status:this.status1,
						reason:this.description
					});

					uni.showToast({
						title: '成功',
						icon: 'success'
					});
					uni.navigateTo({
						url: '/pages/order/order'
					})
				} catch (error) {
					console.error('插入失败:', error);
					uni.showToast({
						title: '失败',
						icon: 'none'
					});
				}
			},

			// 选择图片
			selectImage() {
				// 调用平台的图片选择 API
				uni.chooseImage({
					count: 1, // 允许选择的图片数量
					success: (res) => {
						if (res.tempFilePaths.length > 0) {
							this.imageUrl = res.tempFilePaths[0];
						}
						console.log(this.goodsId)
						console.log(this.sellerId)
						console.log(this.price)
						console.log(this.orderNum)
						console.log(this.status1)
					},
					fail: () => {
						uni.showToast({
							title: '选择图片失败',
							icon: 'none',
						});
					},
				});
			},
			onChangeReason(e) {
				this.indexReason = e.detail.value;
			},
			onChangeType(e) {
				this.indexType = e.detail.value;
			},
			onChangeStatus(e) {
				this.indexStatus = e.detail.value;
			},
			onUploadChange(e) {
				// 处理图片上传逻辑
			},
			// submitForm() {
			// 	// 提交表单逻辑
			// 	uni.showToast({
			// 		title: '提交成功',
			// 		icon: 'success',
			// 		duration: 2000
			// 	});
			// }
		}
	};
</script>

<style lang="scss" scoped>
	@use "refund";
</style>